<template>
  <div>
    <a-row>
      <a-col :span="8" :offset="8">
        <a-card title="修改密码">
          <a-form-model
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 18 }"
          >
            <a-form-model-item has-feedback label="原密码" prop="oldPwd">
              <a-input
                size="large"
                v-model="ruleForm.oldPwd"
                type="password"
                placeholder="原密码"
                autocomplete="off"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback label="新密码" prop="newPwd">
              <a-input
                size="large"
                v-model="ruleForm.newPwd"
                type="password"
                placeholder="新密码"
                autocomplete="off"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback label="确认密码" prop="confirmPwd">
              <a-input
                size="large"
                v-model="ruleForm.confirmPwd"
                type="password"
                placeholder="确认密码"
                autocomplete="off"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
              <a-button
                type="primary"
                @click="submitForm('ruleForm')"
                style="margin-right: 20px"
                >确定</a-button
              >
              <a-button @click="resetForm('ruleForm')">重置</a-button>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { updateUserPwd } from "@/api/system/user";

export default {
  data() {
    let validateOld = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原密码！'));
      } else {
        callback();
      }
    };
    let validateNew = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码！'));
      } else if (value.length < 6 || value.length > 20) {
        callback(new Error('长度在 6 到 20 个字符！'));
      } else {
        callback();
      }
    };
    let validateConf = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码！'));
      } else if (value !== this.ruleForm.newPwd) {
        callback(new Error("两次输入的密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: '',
      },
      rules: {
        oldPwd: [{ validator: validateOld, trigger: 'change' }],
        newPwd: [{ validator: validateNew, trigger: 'change' }],
        confirmPwd: [{ validator: validateConf, trigger: 'change' }],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateUserPwd(this.ruleForm).then(res => {
            if (res.data.success) {
              this.$message.success('修改成功！');
              this.resetForm('ruleForm');
            } else {
              this.$message.error('修改失败！' + res.data.msg);
            }
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  }
}
</script>
